import { BellOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { SelectLang as UmiSelectLang } from '@umijs/max';
import { useState } from 'react';
import * as apiMsg from '@/services/data';
import * as utils from '@/utils/utils';
import Countdown from 'antd/es/statistic/Countdown';
import { Badge, Tooltip } from 'antd';

export type SiderTheme = 'light' | 'dark';

export const SelectLang = () => {
  return (
    <UmiSelectLang
    // style={{
    //   padding: 4,
    // }}
    />
  );
};

export const Question = () => {
  return (
    <div
      style={{
        display: 'flex',
        height: 26,
      }}
      onClick={() => {
        window.open('https://pro.ant.design/docs/getting-started');
      }}
    >
      <QuestionCircleOutlined />
    </div>
  );
};


export const MyMessageBox = () => {
  
  const defaultAlertMessage = "暂无信息";
  const [countdownTicks, setCountdownTicks] = useState<number>(Date.now() + 30000,);
  const [badgeAlertCount, setBadgeAlertCount] = useState<number|undefined>(undefined);
  const [alertTipMessage, setAlertTipMessage] = useState<string|undefined|JSX.Element>(defaultAlertMessage);
  
  const loadDataDo = async () => {
    const result = await apiMsg.messagelist(undefined,undefined,undefined,);

    if (result && result.success) {
      if(result.data && result.data.length > 0){
        // console.log(utils.goUrl(result.data[0].link ?? "", {online:0}));
        setBadgeAlertCount(1);
        setAlertTipMessage(<a onClick={()=>{utils.goUrl(result.data[0].link ?? "", {online:0})}} style={{color:'#fff',fontWeight:'bold'}}><u>{result.data[0].title}</u></a>)
      }
      else{
        setBadgeAlertCount(undefined);
        setAlertTipMessage(defaultAlertMessage);
      }
    }

  };
  
  const reload = () => {
    // console.log('alertMessageBox');
    loadDataDo();
    setCountdownTicks(Date.now() + 60000);
  };

  return (
    <div
      style={{
        display: 'flex',
        height: 26,
      }}
    >
    <span>
      <Tooltip title={alertTipMessage}>
        <Badge count={badgeAlertCount} offset={[10, 0]}>
            <BellOutlined />
        </Badge>
      </Tooltip>
    </span>

    <span style={{visibility: 'hidden', width:0, height:0, overflow:'hidden'}}>
    <Countdown
        title=""
        key="alertMessageBox"
        value={countdownTicks}
        format="s"
        prefix=""
        suffix=""
        valueStyle={{
          fontSize: 0,
        }}
        style={{ visibility: 'hidden' }}
        onFinish={reload}
      />
    </span>
    </div>
  );
};